<template>
  <div class="search-container">
    <div class="search-header">
      <h1>搜索结果</h1>
      <p v-if="searchQuery">关键词: "{{ searchQuery }}"</p>
    </div>

    <div class="search-results"
         v-if="results.length">
      <article v-for="result in results"
               :key="result.id"
               class="result-card"
               @click="goToArticle(result.id)">
        <h2>{{ result.title }}</h2>
        <p>{{ result.excerpt }}</p>
        <div class="result-meta">
          <span class="date">{{ result.date }}</span>
          <div class="tags">
            <span v-for="tag in result.tags"
                  :key="tag"
                  class="tag">
              #{{ tag }}
            </span>
          </div>
        </div>
      </article>
    </div>

    <div class="no-results"
         v-else>
      <p>没有找到相关文章</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const searchQuery = ref('');
const results = ref([]);

const goToArticle = (id) => {
  router.push(`/article/${id}`);
};

const performSearch = () => {
  // 模拟搜索结果
  results.value = [
    {
      id: 1,
      title: '示例搜索结果',
      excerpt: '这是一个匹配搜索关键词的示例文章...',
      date: '2024-03-20',
      tags: ['Vue3', 'JavaScript']
    }
  ];
};

onMounted(() => {
  searchQuery.value = route.query.q || '';
  if (searchQuery.value) {
    performSearch();
  }
});
</script>

<style scoped>
.search-container {
  max-width: 800px;
  margin: 100px auto;
  padding: 2rem;
  color: #fff;
}

.search-header {
  margin-bottom: 2rem;
  text-align: center;
}

.search-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #fff, #88ccff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.result-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.result-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.result-card h2 {
  margin-bottom: 1rem;
  color: #88ccff;
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.no-results {
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

@media (max-width: 768px) {
  .search-container {
    margin: 80px 1rem;
    padding: 1rem;
  }
  
  .search-header h1 {
    font-size: 2rem;
  }
}
</style> 